<template>
  <div class="c-bg-sgray theme-market">
    <div class="c-w100 c-maxh427 c-text-hidden c-p">
      <img class="c-w100 img-pe-none" :src="$addXossFilter(collocationInfo.cover, require('@/assets/defult270.png'))" alt="">
    </div>
    <flash-sales-time-new
      :type="'isCollocation'"
      :price="isMultiple ? collocationInfo.minPrice : collocationInfo.price"
      :startTime="collocationInfo.startTime"
      :endTime="collocationInfo.endTime"
      :originalPrice="(Number(collocationInfo.collocationPrice) - Number(collocationInfo.price)).toFixed(2) > 0 ? (Number(collocationInfo.collocationPrice) - Number(collocationInfo.price)).toFixed(2) : 0"
      :comboType="collocationInfo.isShowPrice == 0 ? 3 : collocationInfo.comboType"
      :isMultiple="isMultiple"
      @falshSalesTime="falshSalesTime"
      @finishFlashSales="finishFlashSales">
    </flash-sales-time-new>
    <div class="c-ph24 c-pv24 c-bg-white c-mb16">
      <div class="c-fs30 c-fc-xblack c-fw600"><span>{{collocationInfo.name}}</span><span class="c-fs18 theme-fc theme-bd1 c-ww96 c-pv2 c-textAlign-c theme-bg-10 c-br4 c-inlineblack c-vcAlign-middle c-ml8">{{collocationInfo.comboType == 1 ? '自选套餐' : '固定套餐'}}</span></div>
      <div class="c-fs22 c-fc-gray c-mt10">{{collocationInfo.intro}}</div>
    </div>
    <section class="c-p">
      <template v-if="collocationInfo.comboType == 1">
        <div class="c-bg-white c-ph24 c-pv24" v-for="(item, index) in collocationInfo.spec" :key="index">
          <div class="c-fs24 c-fc-xblack c-fw600">{{item.name}}<span class="c-fc-gray c-fw400">（该规格可选{{item.num}}个商品）</span></div>
          <div @click="chooseProds(index, pIndex)" class="c-flex-row c-aligni-center c-mt36" v-for="(pItem, pIndex) in item.prods" :key="pIndex">
            <div v-if="pItem.isSelect == 1 || pItem.isNeed == 1" class="iconfont c-fs28 theme-fc c-mr20">&#xe796;</div>
            <div v-else-if="(pItem.isSelect == 0 || !pItem.isSelect) && pItem.prodStatus == 1 && pItem.prodFail == false" class="iconfont c-fs28 c-fc-sgray c-mr20">&#xe6f7;</div>
            <div v-else-if="pItem.prodStatus != 1 || pItem.prodFail" class="iconfont c-fs28 fc-D3D3D3 c-mr20">&#xe771;</div>
            <div class="c-w0 c-flex-grow1 c-flex-row">
              <div class="c-ww210 c-hh140 c-br16 c-text-hidden c-p c-flex-shrink0 c-p">
                <CoverImg @clickImg="clickItem(pItem)" :coverSizeClass="'c-w100 c-h c-br16 c-text-hidden'" imgClass="c-br16" :prodType="item.prodType" :coverUrl="$addXossFilter(pItem.prodType == 5000 && pItem.cover ? (JSON.parse(pItem.cover)[0]) : pItem.cover, require('../../../assets/defult270.png'))" />
                <div class="c-pa c-p-b8 c-p-r8 c-br8 c-fs18 c-fc-white c-ph5 c-hh28 c-flex-row c-flex-center c-translucent-balck50">{{prodMapType[pItem.prodType]}}</div>
                <div v-if="pItem.prodStatus != 1 || pItem.prodFail" class="c-translucent-balck50 c-pa c-p-t0 c-p-l0 c-w100 c-h"></div>
                <div v-if="pItem.prodStatus != 1 || pItem.prodFail" class="iconfont c-fs64 c-fc-white c-pa p-t-4 c-p-r0">&#xe646;</div>
                <svg-icon v-if="pItem.isNeed == 1" icon-class="required" class="required theme-fc c-pa c-p-t0 c-p-l0 c-ww72 c-hh72"></svg-icon>
              </div>
              <div class="c-flex-column c-justify-sb c-ml20 c-w0 c-flex-grow1">
                <div :class="pItem.prodStatus != 1 || pItem.prodFail ? 'c-fc-sgray' : 'c-fc-xblack'" class="c-fs24 c-text-ellipsis2">{{pItem.name || pItem.prodName}}</div>
                <div class="c-flex-row c-justify-sb">
                  <div :class="pItem.prodStatus != 1 || pItem.prodFail ? 'c-fc-sgray' : 'c-fc-xmlred'" class="c-fs26 c-fw600" v-if="collocationInfo.isShowPrice == 1">
                    <span class="c-fs20" v-if="pItem.price != 0">{{'￥' | iosPriceFilter}}</span>{{pItem.price | moneyStr}}
                  </div>
                  <div class="c-fc-gray c-fs26">x{{pItem.prodNum}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
      <div v-if="collocationInfo.comboType == 2" class="c-bg-white c-ph24 c-pv24" :class="(collocationStatus != 1 && collocationStatus != 2) ?'filter' : ''">
        <div v-if="!isMultiple" class="c-fs24 c-fc-xblack c-fw600">套餐商品</div>
        <div v-else>
          <div class="c-fs24 c-fc-xblack c-fw600">规格选择</div>
          <div class="c-flex-row">
            <div class="c-w0 c-flex-grow1" id="specsWrap" :class="showAllSpec ? '' : 'c-contextX-scroll'">
              <div class="c-flex-row c-aligni-center" id="specs" :class="showAllSpec ? 'c-flexw-wrap' : ''">
                <div v-for="(item, index) in collocationInfo.spec" :id="'specs' + index" :key="index" @click="changeSpec(index)" :class="choosedId == item.id ? 'selected-style' : 'c-fc-xblack c-bg-sgray'" class="c-pv4 c-ph20 c-fs22 c-br24 c-flex-shrink0 c-mr20 c-mt24">{{item.name}}</div>
              </div>
            </div>
            <div v-if="showExpandBtn" class="c-fs20 spec-color c-pl16 iconfont c-pt32" @click="showAllSpec = !showAllSpec"><span class="c-inlineblack" :class="showAllSpec ? 'c-rotate90' : 'c-rotate270'">&#xe635;</span></div>
          </div>
        </div>
        <div id="prodsWrap">
          <div v-for="(item, index) in prods" :key="index" @click="clickItem(item)" class="c-flex-row c-aligni-center c-mt36">
            <div class="c-w0 c-flex-grow1 c-flex-row">
              <div class="c-ww210 c-maxh210 c-br16 c-text-hidden c-p c-flex-shrink0">
                <CoverImg :coverSizeClass="'c-w100 c-h c-br16 c-text-hidden'" imgClass="c-br16" :prodType="item.prodType" :coverUrl="$addXossFilter(item.prodType == 5000 && item.cover ? (JSON.parse(item.cover)[0]) : item.cover, require('../../../assets/defult270.png'))" />
                <div class="c-pa c-p-b8 c-p-r8 c-br8 c-fs18 c-fc-white c-ph5 c-hh28 c-flex-row c-flex-center c-translucent-balck50">{{prodMapType[item.prodType]}}</div>
                <div v-if="item.prodStatus != 1 || item.prodFail" class="c-translucent-balck50 c-pa c-p-t0 c-p-l0 c-w100 c-h"></div>
                <div v-if="item.prodStatus != 1 || item.prodFail" class="iconfont c-fs64 c-fc-white c-pa p-t-4 c-p-r0">&#xe646;</div>
              </div>
              <div class="c-flex-column c-justify-sb c-ml20 c-w0 c-flex-grow1">
                <div :class="item.prodStatus != 1 || item.prodFail ? 'c-fc-sgray' : 'c-fc-xblack'" class="c-fs24 c-text-ellipsis2">{{item.name || item.prodName}}</div>
                <div class="c-flex-row c-justify-sb">
                  <div :class="item.prodStatus != 1 || item.prodFail ? 'c-fc-sgray' : 'theme-fc'" class="c-fs22 c-fw600" v-if="collocationInfo.isShowPrice == 1">
                    <span class="c-fs22" v-if="item.price != 0">{{'￥' | iosPriceFilter}}</span>{{item.price | moneyStr}}
                  </div>
                  <div :class="item.prodStatus != 1 || item.prodFail ? 'c-fc-sgray' : 'c-fc-sblack'" class="c-fs22">X{{item.prodNum}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <bottom-buy-com
      :ckFrom="ckFrom.collocationBuy"
      :isNeedPay="true"
      :showBuyButton="true"
      :showMarketingCard="true"
      @invitePoster="invitePoster"
      class="c-p"
    >
      <div class="c-pa c-p-l0 c-w100 c-textAlign-c c-hh56 c-lh56 c-fc-white topTitle c-fs24" v-if="(isMultiple && collocationInfo.spec[chooseIndex].specFail) || (!isMultiple && collocationInfo.collocationFail)">商品库存不足，努力补货中～</div>
      <div class="c-flex-row c-w0 c-flex-grow1 c-justify-end">
        <div v-if="(collocationStatus == 1 || collocationStatus == 2) && !((isMultiple && collocationInfo.spec[chooseIndex].specFail) || (!isMultiple && collocationInfo.collocationFail))" class="c-flex-column c-justify-center c-aligni-end">
          <div class="c-fs24 c-fc-xblack">套餐价：<span class="c-fs30 theme-fc c-fw600"><span v-if="(isMultiple ? collocationInfo.spec[chooseIndex].specPrice : collocationInfo.price) > 0" class="c-fs22">{{'￥' | iosPriceFilter}}</span>{{isMultiple ? collocationInfo.spec[chooseIndex].specPrice : collocationInfo.price | moneyStr}}</span></div>
          <div class="c-fs22 c-fc-gray" v-if="costDown > 0 && collocationInfo.isShowPrice == 1">已省：{{'￥' | iosPriceFilter}}{{costDown | moneyStr}}</div>
        </div>
        <div @click="goBuy" :class="collocationStatus == 2 && ((isMultiple && !collocationInfo.spec[chooseIndex].specFail) || (!isMultiple && !collocationInfo.collocationFail)) && !collocationInfo.outLimit ? 'theme-bg-gradient' : 'c-bg-ccc'" class="c-fs28 c-fc-white c-flex-grow1 c-hh64 c-ww220 c-lh64 c-textAlign-c c-br32 c-ml20 c-fw-b">{{collocationStatus == 1 ? '活动未开始' : (collocationStatus == -1 || collocationStatus == 3) ? '活动已结束' : (isMultiple && collocationInfo.spec[chooseIndex].specFail) || (!isMultiple && collocationInfo.collocationFail) ? '暂时缺货' : collocationInfo.outLimit ? '已达购买上限' : '立即购买'}}</div>
      </div>
    </bottom-buy-com>
  </div>
</template>
<script>
import { utilJs } from "@/utils/common.js";
import BottomBuyCom from "@/components/templates/common/bottomBuyCom.vue";
import FlashSalesTimeNew from "@/components/templates/flashSalesTimeNew.vue";
import CoverImg from '@/components/templates/common/coverImg.vue';
import { getBindPhoneSetting } from "@/utils/checkUnBindPhone.js";
import { goDetails } from "@/utils/goDetails.js";

export default {
  name: 'collocationDetail',
  components: { BottomBuyCom, FlashSalesTimeNew, CoverImg },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      mId: 0,
      bindPhoneSetting: null,
      collocationInfo: '',
      specInfo: [],
      prods: [],
      collocationStatus: 2, //1 未开始 2 进行中 -1 已结束
      choosedArr: [],
      totalMoney: 0,
      maxCostDown: 0,
      prodMapType: global.prodMapType,
      ckFrom: global.ckFrom,
      choosedId: 0,
      chooseIndex: 0,
      isMultiple: false, //固定套餐是多规格还是单规格
      minH: 0,
      showAllSpec: false,
      showExpandBtn: false
    }
  },
  created() {
    utilJs.appShare(this);
  },
  computed: {
    costDown() {
      if (this.collocationInfo.comboType == 1) {
        let costDownMoney = Number(this.totalMoney - Number(this.collocationInfo.price)).toFixed(2);
        for (let i = 0; i < this.specInfo.length; i++) {
          if (this.specInfo[i].num != this.specInfo[i].selectNum) {
            costDownMoney = 0;
            break;
          }
        }
        return costDownMoney;
      }
      if (this.collocationInfo.comboType == 2) {
        let costDownMoney = 0;
        if (this.isMultiple) {
          costDownMoney = Number(this.maxCostDown - this.collocationInfo.spec[this.chooseIndex].specPrice).toFixed(2) > 0 ? Number(this.maxCostDown - this.collocationInfo.spec[this.chooseIndex].specPrice).toFixed(2) : 0;
        } else {
          costDownMoney = Number(this.maxCostDown - this.collocationInfo.price).toFixed(2) > 0 ? Number(this.maxCostDown - this.collocationInfo.price).toFixed(2) : 0;
        }
        return costDownMoney;
      }
    },
  },
  methods: {
    //活动海报
    invitePoster: function () {
      if (this.bindPhoneSetting && this.bindPhoneSetting.shareBind) {
        if (utilJs.goBindMobile()) return;
      }
      let cId = this.collocationInfo.id;
      let proId = this.collocationInfo.id;
      this.$routerGo(this, "push", { path: '/homePage/spread/spreadPoster', query: { cId: cId, type: 6, ckFrom: this.ckFrom.collocationBuy, proId: proId } });
    },
    clickItem(tItem) {
      let prodType = tItem.prodType == 110 || tItem.prodType == 111 || tItem.prodType == 112 ? 5 : tItem.prodType;
      goDetails(this, prodType, tItem.prodId, {}, tItem.childType);
    },
    falshSalesTime(status) {
      this.collocationStatus = status;
    },
    finishFlashSales(status) {
      this.collocationStatus = status;
    },
    goOrder(orderId) {
      this.$routerGo(this, "push", { path: '/member/myOrder/knowledgeOrderDetail', query: { orderId: orderId, tabIndex: -1 } });
    },
    goBuy() {
      let $this = this;
      if (this.bindPhoneSetting && this.bindPhoneSetting.buyBind && utilJs.goBindMobile()) {
        return;
      }
      if (this.collocationStatus != 2 || (this.isMultiple && this.collocationInfo.spec[this.chooseIndex].specFail) || (!this.isMultiple && this.collocationInfo.collocationFail) || this.collocationInfo.outLimit) {
        return;
      }
      if ((!this.isMultiple && this.collocationInfo.unpaidOrder) || (this.isMultiple && this.collocationInfo.spec[this.chooseIndex].unpaidOrder)) {
        this.$cjConfirm({
          title: '提示',
          message: '当前存在待付款订单，是否前往支付',
          confirmButtonText:'去支付',
          onConfirm:() => {
            this.goOrder($this.isMultiple ? $this.collocationInfo.spec[$this.chooseIndex].unpaidOrder : $this.collocationInfo.unpaidOrder);
          }
        })
        return;
      }
      let data = {cId: -1, extId: this.collocationInfo.id, ckFrom: this.ckFrom.collocationBuy, isFromInvite: 0, comboType: this.collocationInfo.comboType, isMultiple: this.isMultiple ? 1 : 0};
      if (this.collocationInfo.comboType == 1) {
        // let collocationSpec = [];
        // for (let i = 0; i < this.collocationInfo.spec.length; i++) {
        //   collocationSpec[i] = {
        //     id: this.collocationInfo.spec[i].id,
        //     prods: []
        //   }
        //   for (let j = 0; j < this.collocationInfo.spec[i].prods.length; j++) {
        //     if (this.collocationInfo.spec[i].prods[j].isNeed == 1 || this.collocationInfo.spec[i].prods[j].isSelect == 1) {
        //       collocationSpec[i].prods.push({
        //         prId: this.collocationInfo.spec[i].prods[j].prId,
        //         prodId: this.collocationInfo.spec[i].prods[j].prodId,
        //         prodType: this.collocationInfo.spec[i].prods[j].prodType,
        //         payMoney: Number(this.collocationInfo.price * this.collocationInfo.spec[i].prods[j].price / this.totalMoney).toFixed(2)
        //       })
        //     }
        //   }
        // }

        let specTmp = JSON.parse(JSON.stringify(this.collocationInfo.spec));
        for (let i = 0; i < specTmp.length; i++) {
          specTmp[i].prods = specTmp[i].prods.filter((item) => {
            return item.isNeed == 1 || item.isSelect == 1;
          })
          if (specTmp[i].prods.length < specTmp[i].num) {
            this.$showCjToast({
              text: specTmp[i].name + '请选择' + specTmp[i].num + '个商品',
              type: 'text',
              time: 1500,
            });
            return;
          }
          for (let j = 0; j < specTmp[i].prods.length; j++) {
            specTmp[i].prods[j].payPrice = Number(this.collocationInfo.price * specTmp[i].prods[j].price / this.totalMoney).toFixed(2)
          }
        }
        localStorage.setItem("collocationProds", JSON.stringify(specTmp));
      } else if (this.collocationInfo.comboType == 2) {
        for (let i = 0; i < this.prods.length; i++) {
          this.prods[i].payPrice = Number(this.collocationInfo.spec[this.chooseIndex].specPrice * this.prods[i].price / this.maxCostDown).toFixed(2)
        }
        if (this.isMultiple) {
          let multipleTmp = {
            name: this.collocationInfo.spec[this.chooseIndex].name,
            id: this.collocationInfo.spec[this.chooseIndex].id,
            prods: this.prods
          }
          localStorage.setItem("collocationProds", JSON.stringify(multipleTmp));
        } else {
          for (let item of this.prods) {
            item.payPrice = Number(this.collocationInfo.price * item.price / this.maxCostDown).toFixed(2)
          }
          localStorage.setItem("collocationProds", JSON.stringify(this.prods));
        }
      }
      this.$routerGo(this, "push", {
        path: '/homePage/course/coursePay',
        query: data
      });
    },
    getTotalNeedPrice(priceArr) {
      let priceTmp = 0;
      for (let i = 0; i < priceArr.length; i++) {
        priceTmp = priceTmp + priceArr[i];
      }
      return priceTmp;
    },
    //获取最大的N个价格之和
    getTopPrice(priceArr, count) {
      let sortArr = priceArr.sort((a, b) => (b - a));
      let priceTmp = 0;
      for (let i = 0; i < count; i++) {
        priceTmp = priceTmp + sortArr[i];
      }
      return priceTmp;
    },
    getInfo() {
      utilJs.getMethod(`${global.apiurl}prodsCollocation/getProdsCollocationDetail/${this.mId}`,
        res => {
          // 活动结束跳转
          if (res && res.pcStatus && res.pcStatus == 3) {
            this.$routerGo(this, "replace", {
              path: "/error/emptyPage",
              query: {
                from: "collocationBuy",
                info: "此活动已结束"
              }
            });
            return;
          }
          this.collocationInfo = res;
          // this.collocationStatus = res.pcStatus;
          if (this.collocationInfo.comboType == 1) {
            this.specInfo = res.spec;
            for (let i = 0; i < this.specInfo.length; i++) {
              let priceArr = []
              let needPriceArr = [];
              let failureArr = []
              this.specInfo[i].selectNum = 0;
              this.specInfo[i].isNeedNum = 0;
              for (let j = 0; j < this.specInfo[i].prods.length; j++) {
                if (this.specInfo[i].prods[j].isNeed == 1) {
                  this.specInfo[i].selectNum++;
                  this.specInfo[i].isNeedNum++;
                  //totalMoney: 已选中的价格之和
                  this.totalMoney = this.totalMoney + Number(this.specInfo[i].prods[j].price) * Number(this.specInfo[i].prods[j].prodNum);
                  needPriceArr.push(Number(this.specInfo[i].prods[j].price) * Number(this.specInfo[i].prods[j].prodNum));
                } else {
                  priceArr.push(Number(this.specInfo[i].prods[j].price) * Number(this.specInfo[i].prods[j].prodNum))
                }
                if (this.specInfo[i].prods[j].prodStatus != 1) { //失效产品
                  failureArr.push(this.specInfo[i].prods[j])
                }
              }
              if (this.specInfo[i].prods.length - failureArr.length < this.specInfo[i].num) {
                this.collocationInfo.collocationFail = true;
              }
              this.maxCostDown = this.maxCostDown + this.getTotalNeedPrice(needPriceArr) + this.getTopPrice(priceArr, this.specInfo[i].num - needPriceArr.length);
            }
          } else { //固定套餐
            if (this.collocationInfo.spec && this.collocationInfo.spec.length == 1 && !this.collocationInfo.spec[0].id) { //单规格
              this.prods = this.collocationInfo.spec[0].prods;
              this.choosedId = 0;
              this.isMultiple = false;
               for (let i = 0; i < this.prods.length; i++) {
                this.maxCostDown = this.maxCostDown + Number(this.prods[i].price) * this.prods[i].prodNum;
              }
            } else { //多规格
              this.chooseIndex = 0;
              //默认选中第一个有库存的规格
              for (let i = 0; i < this.collocationInfo.spec.length; i++) {
                if (!this.collocationInfo.spec[i].specFail) {
                  this.chooseIndex = i;
                  break;
                }
              }
              this.prods = this.collocationInfo.spec[this.chooseIndex].prods;
              this.choosedId = this.collocationInfo.spec[this.chooseIndex].id;
              this.isMultiple = true;
              // this.chooseIndex = 0;
              this.maxCostDown = this.collocationInfo.spec[this.chooseIndex].prodTotalPrice;
              this.$nextTick(() => {
                // let specsW = document.getElementById('specs').offsetWidth;
                let specsWrapW = document.getElementById('specsWrap').offsetWidth;
                let bWidth = document.getElementById('app').clientWidth;
                let gapW = (bWidth / 16) * 0.5;
                let paddingLeft = (bWidth / 16) * 0.6;
                let totalWidth = 0;

                for (let i = 0; i < this.collocationInfo.spec.length; i++) {
                  totalWidth = totalWidth + document.getElementById('specs' + i).offsetWidth;
                }
                totalWidth = totalWidth + gapW * (this.collocationInfo.spec.length - 1)
                if (totalWidth > specsWrapW) {
                  this.showExpandBtn = true;
                  document.getElementById('specsWrap').scrollLeft = document.getElementById('specs').childNodes[this.chooseIndex].offsetLeft - paddingLeft - 10;
                }
              })
            }
            // this.prods = res.prods;
          }
          this.wechatShare();
        }
      );
    },
    changeSpec(selectedIndex) {
      this.prods = this.collocationInfo.spec[selectedIndex].prods;
      this.choosedId = this.collocationInfo.spec[selectedIndex].id;
      this.chooseIndex = selectedIndex;
      this.maxCostDown = this.collocationInfo.spec[this.chooseIndex].prodTotalPrice;
      this.$nextTick(() => {
        let scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;
        window.scrollTo(0, scrollHeight - 1);
        // this.minH = document.getElementById('prodsWrap').offsetHeight;
      })
    },
    chooseProds(specIndex, prodIndex) {
      if (this.specInfo[specIndex].prods[prodIndex].isNeed == 1 || this.specInfo[specIndex].prods[prodIndex].prodStatus != 1 || this.specInfo[specIndex].prods[prodIndex].prodFail)
        return;
      if (this.specInfo[specIndex].prods[prodIndex].isSelect == 1) {
        this.$set(this.specInfo[specIndex].prods[prodIndex], 'isSelect', 0);
        this.totalMoney = this.totalMoney - Number(this.specInfo[specIndex].prods[prodIndex].price) * Number(this.specInfo[specIndex].prods[prodIndex].prodNum);
        this.specInfo[specIndex].selectNum--;
      } else if (this.specInfo[specIndex].prods[prodIndex].isSelect == 0 || this.specInfo[specIndex].prods[prodIndex].isSelect == null) {
        if (this.specInfo[specIndex].selectNum >= this.specInfo[specIndex].num && (this.specInfo[specIndex].num > 1 || this.specInfo[specIndex].isNeedNum > 0)) {
          this.$showCjToast({
            text: '该规格仅可选' + this.specInfo[specIndex].num + '个商品',
            type: 'text',
            time: 1500,
          });
          return;
        }
        if (this.specInfo[specIndex].num == 1) { //如果该只有一个可选，则做成类似单选框那样
          for (let i = 0; i < this.specInfo[specIndex].prods.length; i++) {
            if (this.specInfo[specIndex].prods[i].isSelect == 1) {
              this.$set(this.specInfo[specIndex].prods[i], 'isSelect', 0);
              this.totalMoney = this.totalMoney - Number(this.specInfo[specIndex].prods[i].price) * Number(this.specInfo[specIndex].prods[i].prodNum);
              this.specInfo[specIndex].selectNum--;
            }
          }
        }
        this.$set(this.specInfo[specIndex].prods[prodIndex], 'isSelect', 1);
        this.totalMoney = this.totalMoney + Number(this.specInfo[specIndex].prods[prodIndex].price) * Number(this.specInfo[specIndex].prods[prodIndex].prodNum);
        this.specInfo[specIndex].selectNum++;
      }
    },
    //分享
    wechatShare: function () {
      let title = this.collocationInfo.shareSetting && this.collocationInfo.shareSetting.shareTitle ? this.collocationInfo.shareSetting.shareTitle : (this.collocationInfo.name || window.localStorage.getItem("shareTitle"));
      let shareImg = this.collocationInfo.shareSetting && this.collocationInfo.shareSetting.sharePic ? this.collocationInfo.shareSetting.sharePic : (this.collocationInfo.cover || window.localStorage.getItem("shareLogo"));
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?mId=${this.mId}&refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = this.collocationInfo.shareSetting && this.collocationInfo.shareSetting.shareDesc ? this.collocationInfo.shareSetting.shareDesc : (this.collocationInfo.intro || "点击查看详情");
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { });
    },
    //手机端分享
    appShare: function () {
      let title = this.collocationInfo.shareSetting && this.collocationInfo.shareSetting.shareTitle ? this.collocationInfo.shareSetting.shareTitle : (this.collocationInfo.name || window.localStorage.getItem("shareTitle"));
      let shareImg = this.collocationInfo.shareSetting && this.collocationInfo.shareSetting.sharePic ? this.collocationInfo.shareSetting.sharePic : (this.collocationInfo.cover || window.localStorage.getItem("shareLogo"));
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?mId=${this.mId}&refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = this.collocationInfo.shareSetting && this.collocationInfo.shareSetting.shareDesc ? this.collocationInfo.shareSetting.shareDesc : (this.collocationInfo.intro || "点击查看详情");
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    }
  },
  activated() {
    setDocumentTitle("搭配购");// eslint-disable-line
    this.mId = this.$route.query.mId || '';
    this.collocationInfo = "";
    this.specInfo = [];
    this.prods = [];
    this.choosedArr = [];
    this.totalMoney = 0;
    this.maxCostDown = 0;
    this.choosedId = 0;
    this.chooseIndex = 0;
    this.isMultiple = false;
    this.minH = 0;
    this.showAllSpec = false;
    getBindPhoneSetting(this.ckFrom.collocationBuy).then(res => {
      this.bindPhoneSetting = res;
    });
    this.getInfo();
  },
  deactivated() { }
}
</script>
<style scoped>
.swiper-img-tag {
  width: 3.2rem;
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 0.1rem;
  height: 1.05rem;
}
.swiper-page-tag {
  width: 1.35rem;
  background:rgba(0,0,0,0.4);
  border-radius: 0.5rem;
  height: 0.7rem;
  color: #fff;
}
.vcAlign-text-top {
  vertical-align: text-top;
}
.glass {
  background-image: url("../../../assets/i/wap/datum/glass.png");
}
.filter {
  filter: blur(3px);
}
.fc-D3D3D3 {
  color: #D3D3D3;
}
.p-t-4 {
  top: -0.1rem;
}
.topTitle {
  top: -1.4rem;
  background-color: rgb(51 51 51 / 70%);
}
.selected-style {
  color: #976800;
  background: #9768001a;
  border: 1px solid #976800;
}
.spec-color {
  color: #976800;
}
/deep/ .svg-icon {
  height: 1.8rem;
  width: 1.8rem;
}
</style>


